<template>
  <div class="chat-layout">
    <div class="bar-left">
      <sidebar></sidebar>
    </div>
    <div class="bar-right">
      <component :is="sidebarActive"></component>
    </div>
  </div>
</template>

<script>
  import Sidebar from "@/views/chat/Sidebar";
  import ConversationList from "@/views/chat/ConversationList";
  import PersonalCenter from "@/views/chat/PersonalCenter";
  import FriendList from "@/views/chat/FriendList";
  import {mapGetters} from 'vuex'
    export default {
        name: "index",
      components:{
          Sidebar,ConversationList,PersonalCenter,FriendList
      },
      computed:{
          ...mapGetters([
            'sidebarActive','currentFriendInfo','friendList'
          ])
      },
      methods:{
        // 刷新页面数据 朋友列表、会话列表、添加好友消息列表
        refreshData(){
          this.$store.dispatch('chat/getRequestMessageList')
            .then(()=>console.log("定时任务：请求消息列表刷新成功"))
          this.$store.dispatch('chat/getConversationListTIM')
            .then(()=>console.log("定时任务：会话列表刷新成功"))
          this.$store.dispatch('chat/getFriendList')
            .then(() => {
              // 更新当前查看用户信息资料
              if (this.currentFriendInfo.userid) {
                this.friendList.forEach(item => {
                  if (item.userid === this.currentFriendInfo.userid) {
                    this.$store.commit('chat/SET_CURRENT_FRIEND_INFO', item)
                  }
                })
              }
              console.log("定时任务：好友列表刷新成功")
            })
        }
      },
      created() {
        console.log("聊天功能主页面创建成功")
        // 设置 定时任务 每间隔10分钟 刷新一次页面数据（朋友列表、会话列表、添加好友消息列表）
        setInterval(this.refreshData,600000)
      }
    }
</script>

<style scoped>
  .chat-layout{
    /*50 = navbar  */
    display: flex;
    min-height: calc(100vh - 50px);
    width: 100%;
    position: relative;
    overflow: hidden;
  }
  .bar-right{
    width: 100%;
  }
</style>
